<template>
  <div class="horv-sreen-layout">
    <!-- <div class="layout-header">
      <moduleHeader
        :active="0"
        layoutHeight="0.4rem"
        :buttonGroup="buttonGroup"
        @handleMenu="handleMenu"
        :headerStyle="{ height: '0.72rem' }"
        :leftStyle="{ height: '100%', width: '5.2rem' }"
        :titleStyle="{ lineHeight: '0.72rem', fontSize: '0.32rem' }"
        :buttonViewStyle="{
          height: '0.72rem',
          lineHeight: '0.72rem',
          fontSize: '0.16rem',
          paddingTop: '0.15rem',
        }"
        :buttonStyle="{ height: '0.4rem', padding: '0 0.2rem' }"
        :timeStyle="{ fontSize: '0.16rem' }"
        :rightStyle="{ top: '0.35rem' }"
      >
      </moduleHeader>
    </div> -->
    <div class="layout-content">
      <div class="layout-content-header">
        <moduleAppMoniter class="app-moniter-container"
                          height="100%"
                          v-bind="appMonitorData"
                          :warningValue="warningValue"
                          @changeTab="changeWarningTab"
                          :titleTop="titleTop"
                          pieWidth="130"
                          pieHeight="130"
                          @handlePath="handlePath"
                          :isCursor="true">
        </moduleAppMoniter>
        <moduleBaseNew class="base-new-container"
                       screenSize="horvsreen"
                       :options="options"
                       :defaultValue="defaultValue"
                       height="100%"
                       footerHeight="100%"
                       headerHeight="100%"
                       :deviceNum="deviceNum"
                       v-bind="baseData"
                       :btnStyle="btnStyle"
                       @onChangeTab="onChangeTab">
        </moduleBaseNew>
        <bnsOpertaion class="bns-container"
                      height="100%"
                      v-bind="bnsData"
                      :chartType="bnsChartType"
                      @updateChart="updateChart">
        </bnsOpertaion>
      </div>
      <div class="layout-content-footer">
        <moduleActiveUser class="active-user-container"
                          height="100%"
                          :chartData="userData.chartData"
                          :userValue="userValue"
                          :moduleUserValue="moduleUserValue"
                          @changeUserTab="changeTab"
                          @changeModuleTab="changeModuleTab"
                          :chartType="chartType">
        </moduleActiveUser>
        <moduleTrace class="trace-container"
                     height="100%"
                     :tableData="traceData.tableData"
                     :passData="traceData.passData"
                     v-bind="traceData"
                     :chartType="traceChartType"></moduleTrace>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, watch } from "vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import {
  baiscInformation,
  getOperationMaintenance,
  getDemandPieTotal,
  getDemandBarTotal,
  getMonitorTotal,
  getMonitoringOverview,
  getDemandRankBarTotal,
  userVisitTrend,
  baiscAppOptions,
  demandDateTime,
  baiscDeviceNum,
} from "@/api/mockApi/largescree.js";

import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleTrace from "@/pages/components/trace-1005/index.vue";
import moduleBaseNew from "@/pages/components/baseNew-1001/index.vue";
import moduleAppMoniter from "@/pages/components/appMoniter/index.vue";
import moduleActiveUser from "@/pages/components/active-user/index.vue";
import bnsOpertaion from "@/pages/components/bnsOpertaion/index.vue";
import { useRouter } from "vue-router";
import { buttonGroup } from "@/router/data.js";

const router = useRouter();

// const buttonGroup = ref([
//   { id: 1, name: "总览", path: "/horvsreen", disabled: false },
//   { id: 2, name: "基础设施监控", path: "/infrastructure", disabled: false },
//   { id: 3, name: "应用监控", path: "/application", disabled: false },
// ]);

const handleMenu = (item) => {
  // console.log("item", item);
  router.push({ path: item.path });
};

const handlePath = () => {
  router.push({ path: "/application" });
};

const chartType = ref("init");
const bnsChartType = ref("init");
const traceChartType = ref("init");

// 环形图 文字偏移
const titleTop = "28%";

const btnStyle = {
  right: "1.5rem",
  bottom: "0.15rem",
  fontSize: "0.14rem",
  height: "0.22rem",
  lineHeight: "0.22rem",
  padding: "0 0.1rem",
};

const baseData = reactive({
  baseInfo: {},
});

const appMonitorData = reactive({
  totalData: {},
  appMonitorList: [],
});

const bnsData = reactive({
  info: {},
  chartData: [],
  dataOptions: {
    dvModel: 2, //布局模式
    dvContentStyle: "display:flex;",
    dvMainFontSize: "0.16rem",
    dvUsealFontSize: "0.14rem",
    dvFontSize: "0.18rem",
  },
});

const traceData = reactive({
  tableData: [],
  passData: [],
  barData: [],
  rankData: [],
});

// 运行趋势
const userData = reactive({
  chartData: {
    legendData: [],
    xData: [],
    value: [],
  },
});

// 获取基础设施应用
const options = reactive([]);
const defaultValue = ref("00");

const onChangeTab = (value) => {
  defaultValue.value = value;
  baseInfoRequest.stopFetching();
  baseInfoRequest.updateParams({ app_type_code: defaultValue.value }); // 更新参数
  baseInfoRequest.startFetching();
};

const getBaiscAppOptions = (params = {}) => {
  baiscAppOptions(params).then((res) => {
    const data = res.data && res.data.length ? res.data : [];
    data.map((item) => {
      options.push({
        label: item.app_type,
        value: item.app_type_code,
      });
    });
    defaultValue.value = data[0].app_type_code;
  });
};

const deviceNum = ref([]);
// 基础设施设备数量
const getBaiscDeviceNum = (params = {}) => {
  baiscDeviceNum(params).then((res) => {
    deviceNum.value = res.data && res.data.length ? res.data[0] : [];
  });
};

const getBaiscInformation = (params) => {
  baiscInformation(params).then((res = {}) => {
    const info = res.data && res.data.length ? res.data[0] : {};
    for (const key in info) {
      info[key] = JSON.parse(info[key] || "{}");
    }
    baseData.baseInfo = info || {};
  });
};

const warningValue = ref("01");

const changeWarningTab = (value) => {
  warningValue.value = value;
  yyjkzsRequest.stopFetching();
  yyjkglRequest.stopFetching();
  yyjkzsRequest.updateParams({ type_code: warningValue.value }); // 更新参数
  yyjkglRequest.updateParams({ type_code: warningValue.value }); // 更新参数
  yyjkzsRequest.startFetching();
  yyjkglRequest.startFetching();
};

const getYyjkzsDataList = (params) => {
  getMonitorTotal(params).then((res = {}) => {
    appMonitorData.totalData = res.data && res.data.length ? res.data[0] : {};
  });
};

const getYyjkglDataList = (params) => {
  getMonitoringOverview(params).then((res) => {
    appMonitorData.appMonitorList = res.data || [];
  });
};

const chartParams = ref({
  data_code: "01",
  mof_code: "01",
});
const updateChart = (params) => {
  chartParams.value = params;
  bnsRequest.stopFetching();
  bnsRequest.startFetching();
};

const getDataList = () => {
  getOperationMaintenance(chartParams.value).then((res) => {
    const { success, data = [] } = res || {};
    // if (success) {
    if (data.length) {
      (bnsData.info = {
        num_businesss: data[0].num_businesss,
        num_businesss_sbj: data[0].num_businesss_sbj,
        num_question: data[0].num_question,
        num_question_sbj: data[0].num_question_sbj,
      }),
        (bnsData.chartData = JSON.parse(data[0].data_zst || "[]"));
      setTimeout(() => {
        bnsChartType.value = "update";
      }, 0);
    }
    // }
  });
};

// 需求跟踪需求table
const getXqgzDataList = (params = {}) => {
  getDemandPieTotal(params).then((res) => {
    traceData.tableData = res.data || [];
  });
};

// 需求停留平均天数
const getDemandDateTime = (params = {}) => {
  demandDateTime(params).then((res) => {
    traceData.barData = res.data && res.data.length ? res.data : [];
    setTimeout(() => {
      traceChartType.value = "update";
    }, 1000);
  });
};

const getXqgzzztDataList = (params = {}) => {
  getDemandBarTotal(params).then((res) => {
    traceData.passData = (res.data || []).map((item) => {
      return {
        name: item.status,
        value: item.status_num,
      };
    });
  });
};

const getXqgzpmtDataList = (params = {}) => {
  getDemandRankBarTotal(params).then((res) => {
    traceData.rankData = (res.data || []).map((item) => {
      return {
        name: item.mof_div_dep,
        value: item.demand_num,
      };
    });
  });
};

// 重置图表
const resetChartData = () => {
  userData.chartData.legendData = [];
  userData.chartData.xData = [];
  userData.chartData.value = [];
};

const moduleUserValue = ref("01");
const userValue = ref("01");

const changeModuleTab = (value) => {
  moduleUserValue.value = value;
  operatingTrendRequest.stopFetching();
  resetChartData();
  chartType.value = "init";
  operatingTrendRequest.updateParams({
    type_code: userValue.value,
    app_code: moduleUserValue.value,
  }); // 更新参数
  operatingTrendRequest.startFetching();
};
const changeTab = (value) => {
  userValue.value = value;
  operatingTrendRequest.stopFetching();
  resetChartData();
  chartType.value = "init";
  operatingTrendRequest.updateParams({
    type_code: userValue.value,
    app_code: moduleUserValue.value,
  }); // 更新参数
  operatingTrendRequest.startFetching();
};

// 用户访问
const getOperatingTrendDataList = (params) => {
  userVisitTrend(params).then((res = {}) => {
    const data = res.data && res.data.length ? res.data : [];
    const times = [...new Set(data.map((item) => item.time))];
    times.sort(); // 确保时间顺序正确
    // 获取所有不同的类别名称
    const legendData = [...new Set(data.map((item) => item.name))];
    let value = [];
    // 创建一个二维数组来存储每个时间点上的所有类别值
    const valueMatrix = times.map((time) => {
      return legendData.map((category) => {
        const entry = data.find(
          (entry) => entry.time === time && entry.name === category
        );
        return entry ? parseInt(entry.value, 10) : null;
      });
    });
    // 将 valueMatrix 转换为所需的格式
    for (let i = 0; i < legendData.length; i++) {
      let newRow = [];
      for (let j = 0; j < times.length; j++) {
        newRow.push(valueMatrix[j][i]);
      }
      value.push(newRow);
    }
    userData.chartData.legendData = legendData;
    // userData.chartData.legendData = [
    //   "哈哈哈",
    //   "11111",
    //   "回复挨饿引发的",
    //   "发顺丰",
    //   "的方式",
    //   "而对方",
    //   "是否",
    //   "上帝发誓",
    //   "发涩发",
    //   "官方的说法",
    //   "士大夫十分",
    //   "士大夫",
    //   "撒旦发射点",
    //   "士大夫",
    //   "阿斯达伟大",
    //   "hghgfjkhgf",
    //   "hkjhjf",
    //   "lkjlkjkf",
    //   "jlkjlkjf",
    //   "哈哈哈1",
    //   "哈哈哈2",
    //   "哈哈哈3",
    //   "哈哈哈4",
    //   "哈哈哈5",
    //   "哈哈哈6",
    //   "哈哈哈7",
    //   "哈哈哈8",
    //   "哈哈哈9",
    //   "哈哈哈0",
    //   "哈哈哈67",
    // ];
    userData.chartData.xData = times;
    userData.chartData.value = value;

    // userData.chartData.value = [
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    // ];
    setTimeout(() => {
      chartType.value = "update";
    }, 0);
  });
};

const commonParams = {}; // 这里可以设置通用参数

const baseInfoRequest = usePeriodicRequest(getBaiscInformation, 3000, {
  app_type_code: defaultValue.value,
});
const yyjkzsRequest = usePeriodicRequest(getYyjkzsDataList, 3000, {
  type_code: warningValue.value,
});
const yyjkglRequest = usePeriodicRequest(getYyjkglDataList, 3000, {
  type_code: warningValue.value,
});
const bnsRequest = usePeriodicRequest(getDataList, 3000);
const xqgzRequest = usePeriodicRequest(getXqgzDataList, 3000, commonParams);
const xqgzzztRequest = usePeriodicRequest(
  getXqgzzztDataList,
  3000,
  commonParams
);
const xqgzpmtRequest = usePeriodicRequest(
  getXqgzpmtDataList,
  3000,
  commonParams
);
const xqtltsRequest = usePeriodicRequest(
  getDemandDateTime,
  300000,
  commonParams
);
const operatingTrendRequest = usePeriodicRequest(
  getOperatingTrendDataList,
  3000,
  {
    type_code: userValue.value,
    app_code: moduleUserValue.value,
  }
);

// };

onMounted(() => {
  // init();
  // 自动启动请求
  baseInfoRequest.startFetching();
  yyjkzsRequest.startFetching();
  yyjkglRequest.startFetching();
  bnsRequest.startFetching();
  xqgzRequest.startFetching();
  xqgzzztRequest.startFetching();
  xqgzpmtRequest.startFetching();
  operatingTrendRequest.startFetching();
  xqtltsRequest.startFetching();
  getBaiscAppOptions();
  getBaiscDeviceNum();
});

// 在组件卸载时停止请求
onBeforeUnmount(() => {
  baseInfoRequest.stopFetching();
  yyjkzsRequest.stopFetching();
  yyjkglRequest.stopFetching();
  bnsRequest.stopFetching();
  xqgzRequest.stopFetching();
  xqgzzztRequest.stopFetching();
  xqgzpmtRequest.stopFetching();
  operatingTrendRequest.stopFetching();
  xqtltsRequest.stopFetching();
});

// 监听用户值的变化
watch(
  [() => userValue.value, () => moduleUserValue.value],
  ([typeCode, appCode]) => {
    operatingTrendRequest.stopFetching();
    operatingTrendRequest.updateParams({
      type_code: typeCode,
      app_code: appCode,
    }); // 更新参数
    operatingTrendRequest.startFetching();
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
@import "./style/horvreen.less";
</style>
